<template>
  <el-drawer v-model="visibilityBinding" :direction="direction" :size="size" :before-close="handleClose"
             :show-close="false" :modal="false" ref="drawerRef">
    <template #header>
      <div>
        <a-button shape="circle" @click="close">
          <icon-down/>
        </a-button>
        <div style="cursor: pointer;vertical-align: center;display: flex;align-items: center">

          <h2 style="margin: 0 auto">{{ playing?.name }}</h2>
        </div>
        <div style="cursor: pointer;vertical-align: center;display: flex;align-items: center">

          <h5 style="margin: 10px auto">{{ playing?.ar?.[0]?.name }}</h5>
        </div>
      </div>
    </template>
    <div class="play-view" style="position: relative;padding-bottom: 10px">
      <div class="music-info">
        <div class="lyric-view">
          <div class="img-wrap">
            <div class="changpian">
              <div class="changpian-wrap" ref="changpianRef">
                <img :src="playing?.al?.picUrl||img" ref="imgRef"/>
              </div>
            </div>
          </div>
          <record :musicId="Number(id)"></record>
        </div>

      </div>
      <div class="comment-view mtop-50">
        <!--        <Comment :active="true" :type="0" @closePlayView="PlayViewDrawer = false" :id="this.currenMusicId"-->
        <!--                 scrollDom=".player .el-drawer__body" :scrollOffset="80"></Comment>-->
      </div>
      <div style="position: absolute;bottom: 0;right: 10rem;cursor: pointer" @click="fuzzy">
        <icon-dice :size="30" v-if="gaussian"/>
        <icon-mosaic size="30" v-else/>
      </div>
    </div>
  </el-drawer>
</template>


<script setup>
import {reactive, ref, computed, watch, nextTick} from 'vue';
import {getmusicUrlApi, getLyricApi, getMusicListByIdsApi} from '~/commonApi/api'
import record from "~/components/record.vue"
import libretto from "~/components/libretto.vue"
import {useStore} from "vuex";

const store = useStore()
const playing = computed(() => store.state.playing)
const visibilityBinding = ref(false)
//打开
const open = () => visibilityBinding.value = true
//关闭
const id = ref(0)
const close = () => visibilityBinding.value = false
watch(playing, (newvalue, oldValue) => {
  id.value = newvalue.id
})
const gaussian = ref(false)

const props = defineProps({
  size: {
    default: '100%',
    required: false,
  },
  direction: {
    default: 'btt',
    required: false,
  },
  // destroyOnClose: {
  //   type: Boolean,
  //   default: false,
  //   required:false,
  // },


})
const img = "http://www.codeman.ink/img/test.b66d0610.jpg"

function showloading(x) {
  return x
}

const handleClose = () => {

}
//唱碟旋转
const changpianRef = ref(null)
const imgRef = ref(null)
let timeout, rotate = 0;

function startAnim() {
  timeout = setInterval(async () => {
    let rotateStyle = "rotate(" + rotate + "deg)";
    if (!imgRef.value) return
    imgRef.value.style.transform = rotateStyle;
    imgRef.value.style["-moz-transform"] = rotateStyle;
    imgRef.value.style["-webkit-transform"] = rotateStyle;
    imgRef.value.style["-o-transform"] = rotateStyle;
    imgRef.value.style["-ms-transform"] = rotateStyle;

    rotate += 0.5;
    if (rotate > 360) {
      rotate = 0;
    }
  }, 30);
}

function stopAnim() {
  clearInterval(timeout);
  timeout = null;
}

const isStatus = computed(() => store.state.isStatus)
watch(isStatus, (v) => {
  if (v) {
    startAnim();
  } else {
    stopAnim()
  }

})
const drawerRef = ref(null)
const fuzzy = () => {
  // document.querySelector('.el-drawer.btt').classList.add('updata')
  if (gaussian.value) {
    document.querySelector('.el-drawer.btt').classList.remove('updata')
  } else {
    document.querySelector('.el-drawer.btt').classList.add('updata')
  }
  gaussian.value = !gaussian.value
}


//向父组件暴露以下方法
defineExpose({
  open,
  close,
  showloading,
  //继续旋转方法
  startAnim,
  //暂停旋转方法
  stopAnim
})
</script>

<style scoped lang="less">
:global(.updata) {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
}

:global(.el-drawer.btt) {
  background: linear-gradient(#F6F6F6FF, #F0F4F6FF);
  background: rgba(255, 255, 255, 1);
}

::-webkit-scrollbar {
  display: none;
}


/* 歌词及唱片区域 */
.lyric-view {
  display: flex;
  width: 100%;
  justify-content: space-around;

  .img-wrap {
    position: relative;

    .changzhen {
      position: absolute;
      top: -20px;
      left: 130px;
      width: 120px;
      transform-origin: 3px 3px;
      transition: all 0.5s;
      z-index: 9;

      img {
        width: 120px;
      }
    }

    .changpian {
      margin-top: 40px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background-color: #c4c3c6;
      display: flex;
      justify-content: center;
      align-items: center;

      .changpian-wrap {
        width: 240px;
        height: 240px;
        background-color: #1a1c1e;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

      }

      img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
      }
    }
  }
}

.changzhen-active {
  transform: rotate(30deg);
}

.changpian-active {
  animation: circle 30s infinite linear;
}

@keyframes circle {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@media screen and(max-width: 768px) {
  .btn-other {
    display: none;
  }

  .time-progress {
    display: none;
  }

  .player-bar {
    margin-top: 0;
    width: 150px;

    &-btn {
      &:nth-child(1) {
        display: none;
      }
    }
  }

  .play-view {
    padding: 0 10px;
  }

  .img-wrap {
    display: none;
  }
}

//.* 播放界面抽屉 */
.play-view {
  width: 100%;
  margin: 0 auto;
  padding: 0 20%;

  .music-info {
    margin: 0 auto;

    .music-title {
      text-align: center;
      font-size: 30px;
    }

    .music-author {
      text-align: center;
    }
  }

  .comment-view {
    margin-bottom: 80px;
  }
}

//* 播放界面抽屉 */
.play-view {
  width: 100%;
  margin: 0 auto;
  padding: 0 20%;

  .music-info {
    margin: 0 auto;

    .music-title {
      text-align: center;
      font-size: 30px;
    }

    .music-author {
      text-align: center;
    }
  }

  .comment-view {
    margin-bottom: 80px;
  }
}

</style>